<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="creditsQuerySearchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">学号</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input"
                                       id="searchCode" name="searchCode"
                                       lay-verify="required|searchCode" lay-reqtext="学号为必填项"
                                       placeholder="请输入学号" autocomplete="off">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">时间段</label>
                            <div class="layui-input-inline">
                                <input type="text" name="searchDateRange" id="searchDateRange" autocomplete="off"
                                       placeholder="请选择日期范围" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" id="data-search-btn" class="layui-btn layui-btn-normal" lay-submit=""
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                            </button>
                            <button type="reset" id="data-reset-btn" class="layui-btn layui-btn-danger"
                                    lay-filter="data-reset-btn"><i class="layui-icon"></i> 重 置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <fieldset class="table-search-fieldset" style="margin-top:30px;">
            <legend>查询出学生信息及学分总数</legend>
            <div class="layui-form layuimini-form">
                <form class="layui-form" action="" id="creditsQueryForm" lay-filter="creditsQueryFormFilter">
                    <div class="layui-form layuimini-form" style="margin-top:30px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名<span style="color: red">*</span></label>
                            <div class="layui-input-block ">
                                <input type="text" class="layui-input"
                                       id="name" name="name" readonly>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">学号<span style="color: red">*</span> </label>
                            <div class="layui-input-block">
                                <input type="number" class="layui-input"
                                       id="code" name="code" readonly>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">年级<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input"
                                       id="grade" name="grade" readonly>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">院系<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input"
                                       id="college" name="college" readonly>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">创新学分总分数<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="number" class="layui-input"
                                       id="score" name="score" readonly>
                            </div>
                        </div>


                    </div>
                </form>

            </div>
        </fieldset>
    </div>
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        form.render();

        $("#searchCode").blur(function(){
            var searchCode = $("#searchCode").val();
            var reg = /^[\u4e00-\u9fa5]{2,6}$/;//正则表达式,2-6个汉字
            if(searchCode.length == 0|| searchCode==null || searchCode == '') {
                layer.msg('学号为必填项！', {icon: 5});
            }else{
                if(searchCode.length!=10) {
                    layer.msg('学号应为10位的纯数字！', {icon: 5});
                }
            }
        });

        //监听提交
        form.verify({
            searchCode:function (value) {
                if(value.length<10){
                    return '学号应为长10位的纯数字！'
                }
            }
        });

        //为query表单赋值
        function formAssignment(res) {
            form.val('creditsQueryFormFilter', {
                "name":res.data[0].name,
                "code":res.data[0].code,
                "grade":res.data[0].grade,
                "college":res.data[0].college.name,
                "score":creditCalculate(res)
            })
        }
        //计算总学分
        function creditCalculate(res) {
           let data = res.data;
           let totalScore=0;
           console.log(data.length);

            for (let i = 0; i < data.length; i++) {
                console.log(data.score)
                totalScore += parseInt(data[i].score);
            }
            return totalScore;
        }

        //监听提交
        form.on('submit(data-search-btn)', function (data) {
            let url = 'CreditsServlet?method=search';
            let successFn = function (res) {
                res = JSON.parse(res);
                if (0!=parseInt(res.count)) {
                    formAssignment(res);
                    layer.msg("查询成功",{icon: 1});
                }else{
                    layer.msg("未找到该记录",{icon: 2});
                }
            }
            $.get(url, data.field, successFn);
        });

        $('#data-reset-btn').click(function () {
            $('#creditsQueryForm')[0].reset();
            form.render();
        });

    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        // 日期范围
        laydate.render({
            elem: '#searchDateRange',
            type: 'month',
            range: '~'
        });

    });

    // 年月日选择器（加入时间）
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#enteringDate',
            trigger: 'click'
        });
    })


</script>